﻿@page "/mudtable" 
@using System.Net.Http.Json 
@using MudBlazor 
<MudPopoverProvider />


<MudTable Items="@Elements.Take(4)" Hover="true" Breakpoint="Breakpoint.Sm" Loading="@_loading" LoadingProgressColor="Color.Info">
    <HeaderContent>
        <MudTh>Nr</MudTh>
        <MudTh>Sign</MudTh>
        <MudTh>Name</MudTh>
        <MudTh>Position</MudTh>
        <MudTh>Molar mass</MudTh>
    </HeaderContent>
    <RowTemplate>
        <MudTd DataLabel="Nr">@context.Number</MudTd>
        <MudTd DataLabel="Sign">@context.Sign</MudTd>
        <MudTd DataLabel="Name">@context.Name</MudTd>
        <MudTd DataLabel="Position" HideSmall="_hidePosition">@context.Position</MudTd>
        <MudTd DataLabel="Molar mass">@context.Molar</MudTd>
    </RowTemplate>
</MudTable>

<MudSwitch @bind-Value="_hidePosition" Color="Color.Primary">Hide <b>position</b> when Breakpoint=Xs</MudSwitch>
<MudSwitch @bind-Value="_loading" Color="Color.Primary">Show Loading</MudSwitch>
<MudDataGrid Items="@Elements">
    <Columns>
        <PropertyColumn Property="s=>s.Name" />
    </Columns>
</MudDataGrid>
@code {
    private bool _hidePosition;
    private bool _loading;
    private IEnumerable<Element> Elements = new List<Element>();

    protected override async Task OnInitializedAsync()
    {
        Elements=new List<Element>
        {
            new Element
            {
                Number = 1,
                Sign = "H",
                Name = "Hydrogen",
                Position = "1s1",
                Molar = 1.008
            },
            new Element
            {
                Number = 2,
                Sign = "He",
                Name = "Helium",
                Position = "1s2",
                Molar = 4.0026
            },
            new Element
            {
                Number = 3,
                Sign = "Li",
                Name = "Lithium",
                Position = "1s2 2s1",
                Molar = 6.94
            }  
        };
    }


    class Element
    {
        public int Number { get; set; }
        public string Sign { get; set; }
        public string Name { get; set; }
        public string Position { get; set; }
        public double Molar { get; set; }
        
    }
}